import React from 'react';
import styles from './styles.styl';
import util from '../../../util'
import cx from 'classnames'

class CommentDeleteAlert extends React.Component {
  
  constructor(props) {
    super(props);
    this.displayName = 'CommentDeleteAlert';

    this.state = {
      isShow: false,
    }
  }
  toggleShow = (flag) => {
    this.setState({
      isShow: flag,
    })
  }
  show = () => {
    this.refs.input.focus();
  }
  hide = () => {
    this.refs.input.blur();
  }
  click = () => {
    this.props.onClick && this.props.onClick(this.props.id);
    this.refs.input.blur();
  }
  render() {
    return (
      <div className={cx({
        [styles['alert-modal']]: true,
        [styles['alert-active']]: this.state.isShow,
      })} onMouseDown={util.preventDefaultEvent}>
        <input ref={'input'} onBlur={this.toggleShow.bind(this, false)}  onFocus={this.toggleShow.bind(this, true)} />
        <div className={styles['alert-text']} onClick={this.show}>{this.state.isShow ? '确认删除': '删除'}</div>
        <div className={styles['alert-btn']} onClick={this.click}>确定</div>
        <div className={styles['alert-link']} onClick={this.hide}>取消</div>
      </div>
    );
  }
}

export default CommentDeleteAlert;
